<template>
    <div class="em">
        <div>
            HTML
            <div>
                HTML
                <div>HTML</div>
            </div>
        </div>
    </div>

    <!-- 使用rem作为单位时,会根据根元素的大小进行计算 -->
    <!-- 设置body大小为12px,则第一层 div的大小为2em,第二层大小为第一层大小的2倍，为4em -->
    <!-- 因此em单位会导致当嵌套层级过多而难以进行计算的问题 -->
    <div class="rem">
        <div>
            CSS
            <div>
                CSS
                <div>CSS</div>
            </div>
        </div>
    </div>
    <!-- rem根据根元素的大小进行计算-->
    <!-- 无论嵌套多少次后,文字大小都为2倍的body font-size-->
</template>

<script setup></script>

<style lang="scss">
body {
    font-size: 12px;
    text-decoration: none;
}
.em div {
    font-size: 2em;
}
.rem div {
    font-size: 2rem;
}
</style>
